<html>
<head>
    <meta charset="UTF-8"/>
    <title>科泰教育</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 1150px; height: 600px; margin: 0 auto"></div>
<script language="JavaScript">
    $(document).ready(function () {
       var chart  = Highcharts.chart(container,{
           chart :{
               type: 'spline',
               animation: Highcharts.svg,
               marginRight: 10,
               events: {
                   load: function () {
                       var series = this.series[0];
                       setInterval(function () {
                           $.ajax({
                               url: '/getCurrentLot?size=1',
                               type: 'GET',
                               dataType: 'json',
                               async: false, //同步处理后面才能处理新添加的series
                               success: function (rntData) {
                                   var x = Date.parse(rntData[0].collectTimes);
                                   y = rntData[0].temperature;
                                   series.addPoint([x, y], true, true);
                                   chart.setTitle({
                                       text: '实时温度 ' + y + '°C'
                                   });
                                   chart.setSubtitle({
                                       text: '更新时间 - ' + rntData[0].collectTimes,
                                   })
                               }
                           });
                       }, 2000);
                   }
               }
           },
           title : {
               text: '',
               style: {
                   fontSize: '22px',
                   color: '#222'
               }
           },
           subtitle: {
               text: '',
               style: {
                   color: '#666',
                   fontSize: '12px'
               }
           },
           xAxis : {
               type: 'datetime',
               timezone: 'Asia/Shanghai'
           },
           yAxis : {
               title: {
                   text: '温度'
               },
               tickInterval: 1,
               //min:10,
               //max:40,
               plotLines: [{
                   value: 0,
                   width: 1,
                   color: '#808080'
               }]
           },
           tooltip : {
               formatter: function () {
                   return '<b>' + this.series.name + '</b><br/>' +
                       Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                       Highcharts.numberFormat(this.y, 2);
               }
           },
           plotOptions :{
               area: {
                   pointStart: 1940,
                   marker: {
                       enabled: false,
                       symbol: 'circle',
                       radius: 2,
                       states: {
                           hover: {
                               enabled: true
                           }
                       }
                   }
               }
           },
           legend :{
               enabled: false
           },
           exporting:{
               enabled: false
           },
           series : [{
               name: '实时温度',
               data: (function () {
                   var data = [];
                   $.ajax({
                       url: '/getCurrentLot?size=20',
                       type: 'GET',
                       dataType: 'json',
                       async: false, //同步处理后面才能处理新添加的series
                       success: function (obj) {
                           obj.forEach((d) => {
                               data.push({
                                   x: Date.parse(d.collectTimes),
                                   y: d.temperature,
                               })
                           })

                       }
                   });
                   return data.reverse();
               }())
           }],
       })
    });
</script>
</body>
</html>